<!--
 * @Author: 273198238 2412069378@qq.com
 * @Date: 2025-03-14 15:02:10
 * @LastEditors: 273198238 2412069378@qq.com
 * @LastEditTime: 2025-03-17 13:28:58
 * @FilePath: \population\src\components\RightTop.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="righttop">
    hjhb
  </div>
</template>

<script>
import { mapState } from 'vuex';
import * as echarts from "echarts";
export default {
  data() {
    return {
        seriesData:  [
            {
                name: '北京',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230]
            },
            {
                name: '上海',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330]
            },
            {
                name: '广州',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330]
            },
            {
                name: '深圳',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330]
            }
        ],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var myChart = echarts.init(document.getElementById("righttop"));
      var option = {
        title: {
                    text: '人口流失',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['北京', '上海', '广州', '深圳'],
                    textStyle: {
                        color: '#fff'
                    },
                    top: "25px"
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },


                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: this.seriesData
        
      };
      myChart.setOption(option);
    },
  },
  computed: {
        ...mapState(['populationData'])
    },
    watch: {
        populationData:{
            deep:true,
            // immediate: true,
            handler(newValue, oldValue) {
                if (this.seriesData[0].data.length < 7) {
        this.seriesData[0].data.push(newValue[0].outflow);
        this.seriesData[1].data.push(newValue[1].outflow);
        this.seriesData[2].data.push(newValue[2].outflow);
        this.seriesData[3].data.push(newValue[3].outflow);
      
        this.initChart(); 
      }else{
        this.seriesData[0].data.splice(6,1)
        this.seriesData[1].data.splice(6,1)
        this.seriesData[2].data.splice(6,1)
        this.seriesData[3].data.splice(6,1)
        this.seriesData[0].data.push(newValue[0].outflow);
        this.seriesData[1].data.push(newValue[1].outflow);
        this.seriesData[2].data.push(newValue[2].outflow);
        this.seriesData[3].data.push(newValue[3].outflow);
      
        this.initChart(); 
      }
            }
        }
    }
};
</script>

<style lang="less" scoped>
#righttop {
  width: 100%;
  height: 100%;
}
</style>
